<template>
    <section class="order-list">
        <div class="inner">
            <div class="tabs-content">
                <div class="title">
                    <ul>
                        <li>订单信息</li>
                        <li>预约价格</li>
                        <li>支付金额</li>
                        <li>
                            <Dropdown @on-click="select">
                                <a href="javascript:void(0)">
                                    状态
                                    <Icon type="ios-arrow-down"></Icon>
                                </a>
                                <DropdownMenu slot="list">
                                    <DropdownItem name="0">全部</DropdownItem>
                                    <DropdownItem name="3">退款中</DropdownItem>
                                    <DropdownItem name="4">退款成功</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </li>
                        <li>操作</li>
                    </ul>
                </div>
                <div class="order-list1">
                    <order-item :listinfo="i" v-for="i in list" :key="i.id" :status="2" :width="20"></order-item>
                </div>
                <div class="page-container">
                    <Page :total="num" @on-change="pab" />
                </div>
            </div>
        </div>
    </section>
</template>

<script>
    import OrderItem from '../../../components/ListItem/OrderItem'
    export default {
        name: 'OrderList',
        components: {
            OrderItem
        },
        data () {
            return {
                selected: 0,
                list: [],
                page:1,
                num:0
            }
        },
        created () {
            this.getinfo()
        },
        methods: {
            pab (page) {
                this.page = page
                this.getinfo()
            },
            select (name) {
                this.selected = name
                this.getinfo()
            },
            getinfo() {
                let _this = this
                _this.$post('/api/shop/getTuiProjectOrder',
                    {
                        token:_this.$token,
                        status:_this.selected,
                        page:_this.page,
                        num:10
                    },function (res) {
                        _this.list = res.data
                        _this.num = parseInt(res.data.length)
                        _this.list.forEach(function (i) {
                            _this.$set(i,'type',1);
                            if(i.status == 4){
                                _this.$set(i,'text','退款成功');

                            } else if(i.status ==3) {
                                _this.$set(i,'text','退款处理中');
                                // _this.$set(i,'type',3);
                            }else {
                                _this.$set(i,'text','');
                                // _this.$set(i,'type','');
                            }
                        })
                    },function (err,errmsg,errcode) {
                        _this.$message.error(errmsg);

                    }
                )
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../../../style/style.less";
    .order-list {
        .inner {
            border: 1px solid @border-color;
            .tab {
                border: 1px solid @border-color;
                border-bottom: 0;
                background-color: #f5f5f5;
                &:after {
                    display: block;
                    clear: both;
                    content: "";
                    visibility: hidden;
                    height: 0;
                }
                .tab-item {
                    float: left;
                    width: 25%;
                    height: 43px;
                    line-height: 43px;
                    text-align: center;
                    color: #666;
                    background-color: #f5f5f5;
                    border-right: 1px solid @border-color;
                    border-bottom: 1px solid @border-color;
                    position: relative;
                    cursor: pointer;
                    &:last-child {
                        border-right-color: transparent;
                    }
                }
                .tab-item.active {
                    border-bottom-color: transparent;
                    background-color: #fff;
                    color: @theme-color;
                    &:before {
                        content: '';
                        width: 100%;
                        height: 3px;
                        background-color: @theme-color-dark;
                        position: absolute;
                        top: -1px;
                        left: 0;
                    }
                }
            }
            .tabs-content {
                .page-container {
                    padding: 20px 0;
                    text-align: center;
                }
                .order-list1{
                    padding: 10px;
                }
                >.title{
                    width: 100%;
                    height: 43px;
                    background-color: #f5f5f5;
                    border-bottom: solid 1px #e0e0e0;
                    border-top: 2px solid @theme-color-dark;
                    >ul{
                        >li{
                            float: left;
                            line-height: 43px;
                            text-align: center;
                            font-size: 12px;
                            color: #666666;
                            width: 15%;
                            a{
                                color:#666666 ;
                            }
                        }
                        >:first-child{
                            width: 40%;
                        }
                        /*>:nth-child(3){*/
                        /*width: 18%;*/
                        /*}*/
                    }
                }
            }
        }
    }
</style>
